<template>
    <div>
        <el-row class="maina-tab-title">
            <el-col :span="24">
                <div class="flot-left">
                    <!-- <el-button type="primary" plain class="button-put" @click="batchOperation(1)">{{'批量发布'}}</el-button>
                    <el-button type="primary" plain class="button-put" @click="batchOperation(2)">{{'批量回滚'}}</el-button> -->
                </div>
            </el-col>
        </el-row>
        <div>
            <el-table 
                class="table-c"
                v-loading="loading"
                :data="mainTaskList" 
                ref="multipleTable"
                border 
                :empty-text="M2('暂无数据')"
                style="width: 100%"
                :height='changeMaxHeight()'
                :header-cell-style="{background:'#f5f7fa',color:'#606266',padding:'5px 0px'}"
             >
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <div class="flex-cloumn">
                            <div class="flex-cloumn-title">
                                操作者
                            </div>
                            <div class="w-25"><span class="flex-cloumn-title-b">账号ID:</span>{{scope.row.operationAccount}}</div>
                            <div class="w-25"><span class="flex-cloumn-title-b">账号名:</span>{{scope.row.operationAccountName}}</div>
                            <div class="w-25"><span class="flex-cloumn-title-b">账号类型:</span>{{scope.row.accountTypeName}}</div>
                        </div>
                        <div class="flex-cloumn">
                            <div class="flex-cloumn-title">
                                操作环境
                            </div>
                            <div class="w-25"><span class="flex-cloumn-title-b">IP:</span>{{scope.row.clientIP}}</div>
                            <div class="w-25"><span class="flex-cloumn-title-b">设备:</span>{{scope.row.equipment}}</div>
                            <div class="w-25"><span class="flex-cloumn-title-b">浏览器:</span>{{scope.row.browser}}</div>
                            <div class="w-25"><span class="flex-cloumn-title-b">操作系统:</span>{{scope.row.os}}</div>
                        </div>
                        <div class="flex-cloumn">
                            <div class="flex-cloumn-title">
                                事件
                            </div>
                            <div class="w-25"><span class="flex-cloumn-title-b">事件ID:</span>{{scope.row.eventId}}</div>
                            <div class="w-25"><span class="flex-cloumn-title-b">事件开始时间:</span>{{formatDate(scope.row.eventTimeStart)}}</div>
                            <div class="w-25"><span class="flex-cloumn-title-b">事件结束时间:</span>{{formatDate(scope.row.eventTimeEnd)}}</div>
                            <div class="w-25"><span class="flex-cloumn-title-b">事件类型:</span>{{scope.row.eventTypeValue}}</div>
                            <div class="w-25"><span class="flex-cloumn-title-b">事件结果:</span><span :class="scope.row.executionResult == 0? 'green-f' : 'red-f'">{{scope.row.executionResult == 0 ? '成功':'失败'}}</span></div>
                            <div class="w-25"><span class="flex-cloumn-title-b">影响数据条数:</span><span  @click="openLogDialog(scope.row)" title="点击查看详情" class="bg-link">{{scope.row.impactData}}</span></div>
                            <div class="w-100"><span class="flex-cloumn-title-b">备注:</span>{{scope.row.remark}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="operationAccountName" label="操作账号" align="center"></el-table-column>
                <el-table-column prop="eventTypeValue" label="事件类型" align="center">
                </el-table-column>
                <el-table-column prop="owningSystem"  label="所属系统-页面" align="center"></el-table-column>
                <el-table-column prop="eventTime" label="事件时间" align="center">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.eventTime)}}
                    </template>
                </el-table-column>
                <el-table-column prop="clientIP"  label="客户端IP" align="center"></el-table-column>
                <el-table-column prop="executionResult" label="执行结果" align="center">
                    <template slot-scope="scope">
                        <div class="flex">
                            <div :class="scope.row.executionResult == 0? 'circle green-b' : 'circle red-b'" ></div>
                            {{scope.row.executionResult == 0? '成功' : '失败'}}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            class="page-box"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[50, 100, 200, 500]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <!--改动记录-->
    </div>
</template>
<script>
import debounce from 'lodash.debounce';
import { getBatchOperationLog,getBatchOperationLogKeys } from '@/api/user.js'
import { formatDate} from '@/utils/tools'
export default {
    components:{
    },
    data(){
        return {
            formLabelWidth:'120px',
            uploadFilterList:{
                "executionResult":null,//0：成功    1：失败
                "owningSystem": null,//所属系统
                "eventType":null,//事件类型
                "timeEnum":null,//时间类型   全部(500)、今天(501)、三天内(502)、7天内(503)、15天内(504)、30天内(505)
                "dateFrom":null,
                "dateTo":null,
                "searchType":null,//搜索类型  1：客户端IP、2：操作账号
                "search":null, //搜索  客户端IP、操作账号
                "operationAccount":null,//操作账号
                "batchSearch":[]//批量搜索  -- 配合 searchType 使用
            },
            dialogVisible:false,
            total:0,
            currentPage4:0,
            pageSize:50,
            pageNum:1,
            loading:false,
            mainTaskList:[],
            multipleSelection: [],
            // renderDom :false,
        }
    },
    props:{
        filterList:{
            default:() => ({})
        }
    },
    created: function() {
        this.mainListList()
    },
    watch:{
        filterList:{
            handler:function(val){
                this.pageNum = 1
                this.mainListList(val)
                this.uploadFilterList = val
            },
            deep:true
        },
    },
    computed:{
        scrollContainer(){
            return document.querySelector('.el-table__body-wrapper')
        },  
    },
    methods:{
        openLogDialog(row){

        },
        mainListList:debounce (function(val){
            if(!val) val = this.uploadFilterList
            this.loading = true
            let param = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                executionResult:val ? val.executionResult : null,
                owningSystem:val ? val.owningSystem : null,
                eventType:val ? val.eventType : null,
                timeEnum:val ? val.timeEnum : null,
                dateFrom:val && val.timeValue2 && val.timeValue2.length > 0 ? val.timeValue2[0] : null,
                dateTo:val && val.timeValue2 && val.timeValue2.length > 0 ? val.timeValue2[1] : null,
                searchType:val ? val.searchType : null,
                operationAccount:val ? val.operationAccount : null,
                batchSearch:val ? val.batchSearch : [],
                search:val && val.search ? val.search : null,
            }
            getBatchOperationLog(param).then(res => {
                this.mainTaskList = res.data.rows
                this.total = res.data.records;
                this.currentPage4 = res.data && res.data.pageNum ? res.data.pageNum : 1
                this.loading =false
            }).catch(res => {
                this.loading = false
            })       
        },500),
        changeMaxHeight(){
            let nHeight = 0
            if(document.querySelector('.nav-card')){
                if(navigator.userAgent.indexOf('WebKit') > -1) {
                    nHeight = 60
                }else {
                    nHeight = 60
                }
                return window.innerHeight - document.querySelector('.nav-card').offsetHeight + 10 - nHeight  + 'px' 
            }
                return window.innerHeight - 255 + 'px' 
        },
        //时间格式修改
        formatDate(row) {
            if(row){
                return formatDate(row);
            }else {
                return ''
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.mainListList(this.uploadFilterList)
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.mainListList(this.uploadFilterList)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        success(msg) {
            this.$message({
                showClose: true,
                message:this.M2(msg),
                offset:220,
                duration: 2000,
                type: 'success'
            });
        },
        warning(msg) {
            this.$message({
                showClose: true,
                message: this.M2(msg),
                offset:220,
                type: 'warning'
            });
        },
        error(msg) {
            this.$message({
                showClose: true,
                message: msg,
                offset:220,
                type: 'error'
            });
        },
    }
}
</script>
<style scoped lang="scss">
::v-deep.table-c{
    td {
        padding: 2px;
    }
    .cell{
        padding: 0px !important;
    }
}
.border-b{
    border-bottom: 1px solid #e6ebf5;
    min-height: 70px;
}
.dropdown-class.el-dropdown-menu {
    width: 100px;
}
::v-deep.dialog-main {
    .el-dialog__header {
        padding: 10px 20px 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
    .el-dialog__body {
        padding: 10px 20px;
    }
}
.page-box{
    position: fixed;
    bottom: 10px;
    right: 30px;
}
.button-put{
    padding: 5px 10px;
    font-size: 12px;
}
.maina-tab-title{
    top: -2px;
    .flot-left{
        float: left;
    }
    .order-position{
        margin-left: 10px;
    }
}
.el-table td {
    padding: 0px !important;
}
.flex-cloumn {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background: #eeeeee5e;
    .flex-cloumn-title {
        font-weight: bold;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        width: 100%;
    }
    .flex-cloumn-title-b {
        font-weight: bold;
        font-size: 12px;
    }
    .w-25 {
        width: 25%;
        line-height: 25px;
        height: 25px;
    }
    .w-100 {
        width: 100%;
        line-height: 25px;
        height: 25px;
    }
}
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.circle{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}
.red-b {
    background-color: red;
    
}
.green-b {
    background-color: green;

}
.red-f {
    color: red;
    
}
.green-f {
    color: green;

}
.bg-link {
    color: #3366cc;
    cursor:pointer;
    &:hover{
        background: #3366cc;
        color: #fff;
    }
}
</style>
<style  lang="scss" >
.table-row-b {
    background-color: #f1f1f1 !important;
}
.table-row-c {
    background-color: #fff !important;
    font-weight: bold;
    .cell {
        color: #606266;
    }
}
</style>